<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in images" v-bind:key="item.src">
        <img v-bind:src="item.src" alt="轮播图图片" :class="{fulldisplay:isfull}">
      </mt-swipe-item>
    </mt-swipe>
  </div>
    <!-- 分析:为什么商品展示页面的轮播图那么丑: -->
    <!-- 1. 首页中的图片的宽和高都使用了100%的宽度 -->
    <!-- 2. 商品详情页中的轮播图的图片如果也是用宽度 100% 的话,页面不好看 -->
    <!-- 3. 商品详情页中的轮播图的期望高度100%,宽度自适应 -->
    <!-- 4. 经过分析得到原因:首页中的轮播图和商品详情中的轮播图的分歧点在于宽度到底是100%还是自适应 -->
    <!-- 5. 既然这两个轮播图在宽度上有冲突,就定义一个属性让轮播图图片宽度为100%,
    然后父组件调用子组件的时候传递是否启用宽度100%的样式 -->
</template>
<script>
export default {
    data(){
        return {
          
        }
    },
    props: ["images", "isfull"]
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    height: 200px;
    text-align: center;  // 让轮播图居中
    img {
      height: 100%;
    //   width: 100%;
      object-fit: cover;
    }
  }
}
.fulldisplay{
    width:100%;
}
</style>

